<template>
  <div class="container">
    <div class="title">
      <div class="searchPosition">
        <input type="text" class="search" @input="getKeywordSupplyDemandList" placeholder="搜索供求" v-model="keyword" placeholder-style="font-size: 14px" />
        <img src="http://file.rzkeji.com/web/loveciy/img/circle/search.png"/>
      </div>
      <img src="../../../../static/images/gongqiu_add.png" class="classification" @click="navigateToAdd" v-if="is_hide!=1"/>
    </div>
    <div class="content">
      <ul class="first">
        <li v-for="(item,index) in supplyDemandList" :key="index">
          <div class="headImg">
            <img :src="item.photo_url"/>
          </div>
          <div class="details">
            <div class="detailsTitle">
              <span>{{item.vip_name}}</span>
              <span>{{item.status_name}}</span>
              <span>{{item.created_data}}</span>
            </div>
            <div class="content-info"><text class="detailsContent">{{item.desc}}</text></div>
            <ul class="second clearfix">
              <li v-for="(item1,num) in item.supply_demand_img_list" :key="num">
                <img :src="item1" mode="aspectFill" class="secondImg" @click="previewImage(item,num)"></img>
              </li>
            </ul>
            <div class="detailsFooter">
              <span></span>
              <span @click="setRecordSupplyDemandLikeNum(item.id,index)">
                <img :src="item.is_like == 1? 'http://file.rzkeji.com/web/loveciy/img/circle/backLove.png' :'http://file.rzkeji.com/web/loveciy/img/circle/love.png' "/>
                <span>{{item.supply_demand_like_num}}</span>
              </span>
              <span class="call">
                <span>
                  <img src="../../../../static/images/gongqiu_call.png"/>
                  <span @click.stop="call(item.phone)">联系</span>
                </span>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      is_hide:'',//是否隐藏添加按钮
      supplyDemandList:[],
      limit: 6, //条数
      page: 1, //页码
      keyword: '',
      typeFlag: false,
      previewOnShowFlag: false,//解决预览图片触发onShow的bug
      loginState: false,
      demandListLengthFlag: true
    }
  },
  onShow(){
    if(this.previewOnShowFlag){//解决预览图片触发onShow的bug
      this.previewOnShowFlag = false;
      return
    }
    this.page = 1; //页码
    this.keyword = '';
    this.typeFlag =  false;
    this.supplyDemandList = [];
    this.getSupplyDemandList();
    this.checkLogin();
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    if(this.typeFlag){
      this.getKeywordSupplyDemandList('fenye')
    }else{
      this.getSupplyDemandList();
    }
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page = 1;
    this.supplyDemandList = [];
    this.getSupplyDemandList();
  },
  methods: {
    checkLogin(){
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(user_token){
        this.loginState = true;
      }
    },
    //跳转到添加供求页面
    navigateToAdd(eminen){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 500)
        return
      }
      wx.navigateTo({
        url: '/pages/demandMain/demandAdd/main'
      })
    },
    //获取供求列表
    async getSupplyDemandList(){
      let user_token = wx.getStorageSync('userToken');
      let params = {
        limit: this.limit,
        page: this.page,
        user_token: user_token
      };
      let res = await this.$api.getSupplyDemandList(params);
      if(res.data.level == "success"){
        let data = res.data.data;
        this.is_hide=res.data.is_hide;
        if(data.length == 0 && DemandListLengthFlag){
          this.demandListLengthFlag = false;
          wx.showToast({
            title: '暂无供求信息',
            icon: 'none',
            duration: 1500
          })
          wx.stopPullDownRefresh()
          return
        }
        data.forEach((item,index)=>{
          const newStr = item.created_at.split(' ')[0];
          const dataStr = newStr.split('-');
          const year = dataStr[0];
          const month = dataStr[1];
          const day = dataStr[2];
          const t1 = year + '年' + month+ '月' + day + '日';
          item.created_data = t1;
        })
        this.supplyDemandList = this.supplyDemandList.concat(data);
        wx.stopPullDownRefresh()
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //获取供求列表(关键词搜索)
    async getKeywordSupplyDemandList(type){
      this.typeFlag = true;//关键词分页开个
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(type == 'fenye'){
        params = {
          limit: this.limit,
          page: this.page,
          user_token: user_token,
          keyword: this.keyword
        };
      }else{
        this.page = 1;
        params = {
          limit: this.limit,
          page: this.page,
          user_token: user_token,
          keyword: this.keyword
        };
      }
      let res = await this.$api.getSupplyDemandList(params);
      if(res.data.level == "success"){
        
        let data = res.data.data;
        data.forEach((item,index)=>{
          const newStr = item.created_at.split(' ')[0];
          const dataStr = newStr.split('-');
          const year = dataStr[0];
          const month = dataStr[1];
          const day = dataStr[2];
          const t1 = year + '年' + month+ '月' + day + '日';
          item.created_data = t1;
        })
        if(type == 'fenye'){
          this.supplyDemandList = this.supplyDemandList.concat(data);
        }else{
          if(this.keyword == ''){
            this.typeFlag = false;
          }
          this.supplyDemandList = data;
        }
        wx.stopPullDownRefresh()
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    previewImage(item,num) {
      this.previewOnShowFlag = true;
      var src = item.supply_demand_img_list[num]
      wx.previewImage({
        current: src, // 当前显示图片的http链接  
        urls: item.supply_demand_img_list // 需要预览的图片http链接列表
      })
    },
    //点赞
    async setRecordSupplyDemandLikeNum(id,index){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        return
      }
      if(this.supplyDemandList[index].is_like == 1){
        return;
      }
      let user_token = wx.getStorageSync('userToken');
      let params = {
        user_token: user_token,
        supply_demand_id:id,
      };
      let res = await this.$api.setRecordSupplyDemandLikeNum(params);
      if(res.data.level == "success"){
        this.supplyDemandList[index].supply_demand_like_num += 1;
        this.supplyDemandList[index].is_like = 1;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //拨打电话
    call(phone){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        return
      }
      wx.makePhoneCall({
        phoneNumber: phone,
      })
    },
  }, 
}
</script>

<style scoped>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	box-sizing: content-box;
}
.container{width: 100%;overflow: hidden;}
.title{width: 100%;height: 50px;display: flex;justify-content: center; align-items: center; border-bottom: 0.5px solid #d9d9d9; background-color: #2aa7e1;}
.classification{width: 20px;height:20px;margin-left: 5px;}
.searchPosition{position: relative;}
.searchPosition img{width: 25px;height: 25px;position: absolute;left: 15px;top:2px;}
.search{width: 268px;height: 30px;margin-left: 6px;border-radius: 20px;padding-left:40px;background-color: #ffffff}
.content{width:96%;margin-top: 15px;margin-left: 2%}
.content ul.first{width: 100%;}
.content ul.first>li{width: 100%;display: flex;justify-content: row;margin-top: 35px;padding-bottom: 10px;border-bottom: 0.4px solid #d9d9d9}
.headImg{width: 50px;}
.headImg img{width: 30px;height: 30px;border-radius: 30px;}
.details{width: 315px;padding-right:30px;}
.detailsTitle{width: 100%;height:35px;display: flex;justify-content: row;position: relative;}
.detailsTitle>span:nth-of-type(1){font-size: 16px;font-weight: 600;margin-left: 10px;margin-right: 10px;}
.detailsTitle>span:nth-of-type(2){font-size: 11px;display: block;width: 50px;height: 18px;text-align: center;line-height: 18px;margin-left:10px;color: #ffffff;background: #2aa7e1;border-radius:10px;}
.detailsTitle>span:nth-of-type(3){font-size: 14px;color: #9d9d9d;position: absolute;right:0;top:0 ;}
.detailsContent{width: 310px;line-height: 25px;font-size: 14px;}
.second{width: 310px;margin-top: 10px;margin-bottom: 10px;margin-left:10px}
.second li{width:100px;height:100px;margin-right: 3px;float: left;margin-top: 10px;overflow:hidden;position: relative;}
.secondImg{width:100px;height:100px;}
.detailsFooter{width: 310px;height: 40px;display: flex;justify-content: row;color: gray;margin-left:10px;}
.detailsFooter>span{display: block;display: flex;justify-content: row;height: 24px;line-height: 24px}
.detailsFooter>span img{width: 15px;height: 15px;vertical-align: middle;margin-left:8px;margin-right: 8px;}
.detailsFooter>span span{vertical-align: middle;}
.detailsFooter>span:nth-of-type(1){width: 100px;font-size: 14px;height: 30px;line-height: 30px;margin-top: 5px;}
.detailsFooter>span:nth-of-type(2) img{margin-top: 4px;}
.detailsFooter>span:nth-of-type(2),.detailsFooter>span:nth-of-type(3){width: 68px;font-size: 14px;border:0.2px solid #999999;border-radius: 10px;margin-top: 5px;}
.detailsFooter>span:nth-of-type(2){margin-left: 58px;}
.detailsFooter>span:nth-of-type(3){width: 65px;margin-left: 10px;}
.call span{width: 65px;height: 24px;margin-left: 0px;background: transparent;font-size: 14px;padding:0;line-height: 24px;color: #9d9d9d;text-align: left;}
.call span span{margin-top: 20px;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 20px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.article{margin-top: 10px;background-color: #f2f2f2;padding: 10px;width: 290px;margin-bottom: 10px;}
.article img{width: 290px;display: block;}
.article div{line-height:25px;font-size:14px;margin-top: 10px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.content-info{margin-left: 19px}
</style>
